import React from "react";
import "./App.css";
import { BaseDemo, FooterDemo, LoadingDemo } from "./demos";

function App() {
  const list = [
    { text: "基本应用", node: <BaseDemo /> },
    { text: "自定义footer", node: <FooterDemo /> },
    { text: "内容Loading", node: <LoadingDemo /> },
  ];

  return (
    <div className="App">
      <div className="demo">
        {list.map((item, index) => (
          <div
            key={index}
            style={{
              padding: 10,
              border: "1px solid #d9d9d9",
              borderRadius: 4,
            }}
          >
            <div>{item.text}</div>
            <div style={{ padding: 12 }}>{item.node}</div>
          </div>
        ))}
      </div>
      <iframe src="api.html" />
    </div>
  );
}

export default App;
